<template>
	<view class="box">
		<HeaderBar title="名片交换请求"/>
		<!-- 占位 -->
		<u-gap height="15"></u-gap>
		<view class="message" v-if="list.length > 0">
			<view class="message-list" v-for="it in list">
				
				<view class="message-list-content">
					<image class="message-list-content-avatar" :src="it.head"  @click="toMixinIndex(1,{userId: it.id})"></image>
					<view class="message-list-content-r">
						<view class="message-list-content-r-tx">
							<view class="message-list-content-r-name">{{it.nickname || ''}}</view>
							<view class="message-list-content-r-tx-subTitle">{{it.identity || ''}}</view>
							<view class="message-list-content-r-tx-address">{{it.address || ''}}</view>
						</view>
						<view class="message-list-content-r-btns">
							<view class="message-list-content-r-btns-agree" @click="agree(it.friend_id)">同意</view>
							<view class="message-list-content-r-btns-rej" @click="delCard(it.friend_id,1)">拒绝</view>
						</view>
						<!-- <view class="message-list-content-r-f">
							已同意
						</view> -->
					</view>
				</view>
				<view class="message-list-comment">
					<image :src="ossUrl + `/static/card/7.png`" mode=""></image>
					<view>
						<view class="message-list-comment-item message-list-comment-r">
							<text>对方发起的名片交换</text>
						</view>
						<view class="message-list-comment-item ">
							<text>来源：{{it.share}}</text>
							<text>{{it.add_time}}</text>
						</view>
					</view>
		
				</view>
			</view>
		</view>
		<view class="noData" style="padding-bottom:120rpx;" v-else>
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" />
		</view>
	</view>
</template>

<script>
	import HeaderBar from '@/components/header/header.vue'
	import {
		InformationExchangeRequestList,InformationAllBusinessCardsDel,InformationAllBusinessCardsAgree
	} from '@/common/http/api.js'
	export default {
		components:{
			HeaderBar
		},
		data() {
			return {
				top: 0,
				options: [
					{
						text: '删除',
						style: {
							backgroundColor: '#f56c6c'
						}
					}
				],
				keyword:'',
				height: 0,
				//分页
				params:{
					page: 1
				},
				isList: true,
				list: [],
			}
		},
		created() {
			// 获取胶囊按钮的位置信息
			let menuButtonRect = wx.getMenuButtonBoundingClientRect();
			console.log("Menu button rect:", menuButtonRect);

			this.top = menuButtonRect.top
			this.height = menuButtonRect.height
			// 输出具体的位置和尺寸信息
			console.log("Top:", menuButtonRect.top); // 胶囊按钮顶部位置
			console.log("Left:", menuButtonRect.left); // 胶囊按钮左侧位置
			console.log("Width:", menuButtonRect.width); // 胶囊按钮宽度
			console.log("Height:", menuButtonRect.height); // 胶囊按钮高度
			console.log("Right:", menuButtonRect.right); // 胶囊按钮右侧位置
			console.log("Bottom:", menuButtonRect.bottom); // 胶囊按钮底部位置
			this.init()
		},
		onReachBottom() {
			if(this.isList){
				this.params.page ++
				this.init()
			}
		},
		methods: {
			reload(){
				this.page = 1
				this.list = []
				this.init()
			},
			delCard(id,type){
				uni.showLoading()
				InformationAllBusinessCardsDel({
					id
				}).then(res => {
					uni.hideLoading()
					uni.showToast({duration:3000,
						title:'已拒绝',
						icon:'none'
					})
					setTimeout(()=>{
						this.reload()
					},1500)
				})
			},
			agree(id) {
				uni.showLoading()
				InformationAllBusinessCardsAgree({
					id
				}).then(res => {
					uni.hideLoading()
					uni.showToast({duration:3000,
						title:'已同意',
						icon:'none'
					})
					setTimeout(()=>{
						this.reload()
					},1500)
				})
			},
			sendMessage(){
				uni.navigateTo({
					url:'/pagesA/wxChat/wxChat'
				})
			},
			init(){
				uni.showLoading()
				InformationExchangeRequestList(this.params).then(res=>{
					uni.hideLoading()
					if(Array.isArray(res.data) && res.data.length > 0) {
						if(this.params.page === 1) {
							this.list = res.data
						} else {
							this.list = this.list.concat(res.data)
						}
					} else {
						this.isList = false
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		
		min-height: 100vh;
		background: linear-gradient(to bottom, #b4f0df 0%, #f6f7f8 473rpx, #f6f7f8 473rpx, #f6f7f8 100%); /* 设置渐变色 */
	}

	image {
		width: 100%;
		height: 100%;
	}

	.barTitle {
		width: 100%;
		position: fixed;
		left: 0;
		top: -473rpx;
		text-align: center;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #211C1E;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bg {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
	}

	.search {
		width: 690rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		margin-bottom: 25rpx;

		.search-input {
			width: 553rpx;
			height: 70rpx;
			background: #FFFFFF;
			border-radius: 35rpx;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 20rpx 27rpx;
			margin-right: 25rpx;
			.search-input-icon {
				width: 32rpx;
				height: 32rpx;

			}

			input {
				flex: 1;
				min-width: 0;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				margin-left: 11rpx;
			}

			.search-input-ac {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}
		}

		.search-rig {
			display: flex;
			align-items: center;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 9rpx;
			}

			.search-rig-s {
				width: 52rpx;
				height: 25rpx;
			}

		}
	}

	.message {
		width: 690rpx;
		margin: 0 auto;
		margin-bottom: 30rpx;

		.message-list {
			width: 100%;
			background: #FFFFFF;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 19rpx 16rpx;
			margin-bottom: 24rpx;

			.message-list-header {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 50rpx;

				.message-list-header-l {
					display: flex;
					align-items: center;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #2B2B2B;

					image {
						width: 44rpx;
						height: 44rpx;
						margin-right: 6rpx;
					}
				}

				.message-list-header-r {
					display: flex;
					align-items: center;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;

					.text {

						margin-left: 13rpx;
					}

					image {
						width: 28rpx;
						height: 28rpx;
						margin-left: 8rpx;
					}
				}
			}

			.message-list-content {
				display: flex;

				.message-list-content-avatar {
					width: 100rpx;
					height: 100rpx;
					margin-right: 13rpx;
					border-radius: 50%;
				}

				.message-list-content-r {
					display: flex;
					flex: 1;
					min-width: 0;

					.message-list-content-r-tx {
						flex: 1;
						min-width: 0;

						.message-list-content-r-name {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 30rpx;
							color: #211C1E;
						}

						.message-list-content-r-tx-subTitle {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							margin-bottom: 16rpx;
						}

						.message-list-content-r-tx-address {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							width: 100%;
							margin-right: 10rpx;
						}
					}

					.message-list-content-r-btns {
						width: 130rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.message-list-content-r-btns-agree {
							width: 130rpx;
							height: 55rpx;
							background: #12B475;
							border-radius: 28rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #FFFFFF;
							margin-bottom: 10rpx;
						}

						.message-list-content-r-btns-rej {
							width: 131rpx;
							height: 56rpx;
							border-radius: 28rpx;
							border: 1px solid #C8C8C8;
							display: flex;
							align-items: center;
							justify-content: center;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #211C1E;
						}
					}
					.message-list-content-r-f {
						width: 130rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #9E9E9E;
					}
				}
			}

			.message-list-comment {
				height: 170rpx;
				width: 100%;
				position: relative;

				&>image {
					position: absolute;
					top: 0;
					left: 0;
					z-index: 2;
				}

				&>view {
					width: calc(100% - 30rpx);
					position: absolute;
					top: 46rpx;
					left: 15rpx;
					z-index: 3;

					.message-list-comment-item {

						display: flex;
						justify-content: space-between;

						text {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
						}
					}

					.message-list-comment-r {
						justify-content: unset;
						border-bottom: 1rpx solid #E5E5E5;
						padding-bottom: 18rpx;
						margin-bottom: 18rpx;
					}
				}
			}
		}
	}

	.title {
		width: 690rpx;
		margin-left: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #211C1E;
		margin-bottom: 34rpx;
	}

	.list {
		width: 100%;

		.list-item {
			width: 100%;
			margin-bottom: 10rpx;
			.list_item {
				box-sizing: $uni-bg-color;
				padding: 39rpx 49rpx;
				display: flex;
				align-items: center;

				.list_item-img {
					width: 100rpx;
					height: 100rpx;
					margin-right: 13rpx;
				}

				.list_item-content {
					width: 350rpx;

					.list_item-content-h {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 16rpx;

						.list_item-content-h-name {
							display: flex;
							align-items: center;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 30rpx;

							image {
								margin-left: 14rpx;
								width: 26rpx;
								height: 26rpx;
							}
						}

						.list_item-content-h-address {
							display: flex;
							align-items: center;
							font-family: PingFang SC;
							font-weight: 300;
							font-size: 24rpx;
							color: #7A7A7A;
							
							image {
								margin-right: 10rpx;
								width: 30rpx;
								height: 30rpx;
							}
						}
					}

					.list_item-content-subTitle {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						display: flex;
						align-items: center;
						margin-bottom: 17rpx;

						text {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #12B475;
							margin-left: 36rpx;
						}
					}

					.list_item-content-address {
						min-width: 0;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						//height: 23rpx;
					}
				}

				.list_item-rig {
					flex: 1;
					min-width: 0;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					&>view {
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #131313;

						image {
							margin-bottom: 18rpx;
							width: 38rpx;
							height: 38rpx;
						}
					}
				}
			}
		}
	}
</style>